


        main{
            overflow: hidden;
        }

        main .headSwiper .swiper-slide .contn>p,
        main .headSwiper .swiper-slide .contn .link a,
        main .intro .txtBox span:first-child,
        main .creative .row:nth-child(1) .box.txt p,
        main .creative .row:nth-child(3) .box p,
        main .flexible p{
            font-size: 14px;
        }


        main .headSwiper{
            overflow: hidden;
            margin-bottom: 240px;
            margin-left: -240px;
        }
        main .headSwiper .swiper{
            overflow: initial;
        }
        main .headSwiper .swiper-slide{
            padding-left: 240px;
            overflow: hidden;
            min-height: 100vh;
            cursor: grab;
        }
        main .headSwiper .swiper-slide .contn{
            position: relative;
        }
        main .headSwiper .swiper-slide .contn>p{
            line-height: 14px;
            color: #a4a3ae;
            margin-left: 50px;
            width: 60%;
            padding-top: 75px;
        }
        main .headSwiper .swiper-slide .contn .title{
            position: relative;
            z-index: 2;
            margin-top: 84px;
        }
        main .headSwiper .swiper-slide .contn .title h1{
            font-size: 13.5vw;
            line-height: 1;
            
        }
        main .headSwiper .swiper-slide .contn .picBox{
            margin-left: 200px;
            margin-top: -90px;
        }
        main .headSwiper .swiper-slide .contn .picBox{
            margin-right: -190px;
        }
        main .headSwiper .swiper-slide .contn .link{
            position: absolute;
            left: 190px;
            top: 700px;
            z-index: 2;
        }
        main .headSwiper .swiper-slide .contn .link a{
            width: 280px;
            text-align: center;
            letter-spacing: 1px;
            line-height: 60px;
            color: #fff;
            position: relative;
            z-index: 1;
            display: block;
        }
        main .headSwiper .swiper-slide .contn .link a::before{
            position: absolute;
            content: '';
            z-index: -1;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 50px;
            overflow: hidden;
            transition: transform .3s cubic-bezier(.365,.305,0,1);
        }
        main .headSwiper .swiper-slide .contn .link a:hover::before{
            transform: scale(1.1);
        }
        main .headSwiper .swiper-slide>p,
        main .headSwiper .swiper-slide .contn>*{
            transition: transform .6s cubic-bezier(.365,.305,0,1) .6s;
            transform: translateX(100vw);
        }
        main .headSwiper .swiper-slide.swiper-slide-active .contn>*{
            transform: translateX(0px);
        }
        main .headSwiper .swiper-slide .timer{
            position: absolute;
            top: 43vh;
            left: 80px;
            flex-direction: column;
            align-items: flex-start;
        }
        main .headSwiper .swiper-slide .timer .page{
            line-height: 1;
            transform-origin: left bottom;
            transform: rotate(-90deg);
            margin-left: 2px;
        }
        main .headSwiper .swiper-slide .timer .page .length::before{
            content: '/';
        }
        main .headSwiper .swiper-slide .timer .page .current{
            font-size: 32px;
            margin-right: 5px;
        }
        main .headSwiper .swiper-slide .timer .page .current::before {
            content: "";
            display: inline-block;
            width: 25px;
            height: 2px;
            background-color: #969696;
            margin-right: 20px;
        }
        main .headSwiper .swiper-slide .timer i{
            width: 2px;
            height: 20vh;
            margin-top: 5vh;
            background: #969696;
            position: relative;
        }
        main .headSwiper .swiper-slide .timer i::before{
            content: '';
            background: #000;
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            transform-origin: bottom;
            transform: scaleY(0);
        }
        main .headSwiper .swiper-slide-active .timer i::before{
            animation: timer linear 3s;
        }
        main .headSwiper .swiper-slide-active.restart .timer i::before{
            animation: timer1 linear 3s;
        }
        @keyframes timer{
            from{
                transform: scaleY(0);
            }to{
                transform: scaleY(1);
            }
        }
        @keyframes timer1{
            from{
                transform: scaleY(0);
            }to{
                transform: scaleY(1);
            }
        }
        
        main .headSwiper .swiper-slide.swiper-slide-prev .contn>p,
        main .headSwiper .swiper-slide.swiper-slide-prev .contn .picBox,
        main .headSwiper .swiper-slide.swiper-slide-next .contn>p,
        main .headSwiper .swiper-slide.swiper-slide-next .contn .picBox,
        main .headSwiper .swiper-slide.swiper-slide--duplicate-active .contn>p,
        main .headSwiper .swiper-slide.swiper-slide--duplicate-active .contn .picBox,
        main .headSwiper .swiper-slide.swiper-slide-active .contn>p,
        main .headSwiper .swiper-slide.swiper-slide-active .contn .picBox{
            transition-delay: .1s;
        }
        main .headSwiper .swiper-slide.swiper-slide-prev .contn .title,
        main .headSwiper .swiper-slide.swiper-slide-next .contn .title,
        main .headSwiper .swiper-slide.swiper-slide--duplicate-active .contn .title,
        main .headSwiper .swiper-slide.swiper-slide-active .contn .title{
            transition-delay: .15s;
        }
        main .headSwiper .swiper-slide.swiper-slide-prev .contn .link,
        main .headSwiper .swiper-slide.swiper-slide-next .contn .link,
        main .headSwiper .swiper-slide.swiper-slide--duplicate-active .contn .link,
        main .headSwiper .swiper-slide.swiper-slide-active .contn .link{
            transition-delay: .2s;
        }
        main .headSwiper .btns{
            position: absolute;
            top: 90px;
            right: 115px;
            z-index: 2;
        }
        main .headSwiper .btns .prev{
            margin-right: 30px;
        }
        main .headSwiper .btns p{
            transition: transform .3s cubic-bezier(.365,.305,0,1);
        }
        main .headSwiper .btns .prev:hover{
            transform: translateX(-10px);
        }
        main .headSwiper .btns .next:hover{
            transform: translateX(10px);
        }
        
        main .intro>*{
            width: 50%;
            min-height: 548px
        }
        main .intro .txtBox{
            position: relative;
        }
        main .intro .txtBox .verLine{
            right: 0px;
        }
        main .intro .txtBox .tp{
            top: 0px;
        }
        main .intro .txtBox .btm{
            bottom: 0px;
        }
        main .intro .txtBox span:first-child{
            line-height: 14px;
            position: absolute;
            top: 0px;
            left: 0px;
            color: #aaa;
        }
        main .intro .txtBox .txt{
            max-width: 330px;
        }
        main .idea .txtBox .content>p{
            max-width: 240px;
        }
        main .intro .tips h2{
            padding-left: 15%;
        }
        main .intro.frozen .tips h2{
            transform: rotate(0deg);
        }

        main .creative{
            margin-top: 130px;
        }
        main .creative .row .box{
            width: 50%;
        }
        
        main .creative .row:nth-child(1) .box.pic{
            text-align: right;
            position: relative;
        }
        main .creative .row:nth-child(1) .box.pic .horLine{
            bottom: 0px;
            left: 0px;
        }
        main .creative .row:nth-child(1) .box.pic p{
            width: 270px;
            display: inline-block;
            vertical-align: top;
        }
        main .creative .row:nth-child(1) .box.txt p{
            color: #aaa;
            padding-left: 23%;
        }
        main .creative .row:nth-child(2){
            justify-content: flex-end;
        }
        main .creative .row:nth-child(3){
            width: 50%;
        }
        main .creative .row:nth-child(3) .box{
            width: 100%;
        }
        main .creative .row:nth-child(3) .box p{
            width: 50%;
            color: #aaa;
            padding-right: 30px;
        }


        main .idea{
            margin-top: 340px;
        }
        main .idea>*{
            width: 50%;
        }
        main .idea .txtBox{
            position: relative;
        }
        main .idea .txtBox .content .horLine{
            top: 0px;
            right: 0px;
        }
        main .idea .txtBox .content h1{
            margin-bottom: 90px;
            letter-spacing: 8px;
        }
        main .idea .txtBox i{
            right: 0px;
        }
        main .idea .txtBox .horLine{
            top: 0px;
        }
        main .idea .txtBox .verLine{
            bottom: 0px;
        }
        
        main .flexible{
            margin-top: 150px;            
        }
        main .flexible .contn{
            position: relative;
            justify-content: flex-end;
        }
        main .flexible p{
            color: #aaa;
        }
        main .flexible .txt{
            position: absolute;
            top: 0px;
            left: 0px;
            transform-origin: left bottom;
            transform: rotate(90deg);
        }
        main .flexible .verLine{
            right: 50%;
            bottom: 0px;
            z-index: 2;
        }
        main .flexible .horLine{
            bottom: 0px;
            left: 25px;
        }
        main .flexible .pic{
            width: 50%;
            padding-bottom: 60px;
            position: relative;
        }
        main .flexible .pic .picBox{
            width: 270px;
        }
        main .flexible .pic .t{
            position: absolute;
            left: 23%;
            bottom: 0px;
        }
        main .custmz{
            margin-top: 70px;
        }
        main .custmz .contn{
            background: #f6f6f6;
            padding-top: 180px;
            padding-bottom: 160px;
            text-align: center;
            position: relative;
        }
        main .custmz .contn h1{
            position: absolute;
            top: 0px;
            left: 10.5%;
            transform: translateY(-75%);
            text-align: left;
        }
        main .custmz .contn a{
            position: absolute;
            width: 240px;
            height: 240px;
            top: 26%;
            right: 15%;
            z-index: 2;
            color: #fff;
            font-size: 30px;
            line-height: 240px;
            letter-spacing: 3px;
        }
        main .custmz .contn a::after{
            position: absolute;
            z-index: -1;
            content: '';
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            border-radius: 50%;
            background: #e71b23;
            transition: transform .3s cubic-bezier(.365,.305,0,1);
        }
        main .custmz .contn a:hover::after{
            transform: scale(1.1);
        }
        main .custmz .contn img{
            width: 100%;
            max-width: 700px;
            display: inline-block;
        }

        @media(max-width:1600px){
            main .headSwiper .swiper-slide .contn>p,
            main .headSwiper .swiper-slide .contn .link a,
            main .intro .txtBox span:first-child,
            main .creative .row:nth-child(1) .box.txt p,
            main .creative .row:nth-child(3) .box p,
            main .flexible p{
                font-size: 12px;
            }

            main .headSwiper .swiper-slide{
                padding-left: 200px;
            }
            main .headSwiper{
                margin-left: -200px;
            }
            main .headSwiper .swiper-slide .contn .link{
                left: 160px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-right: -160px;
            }
            main .headSwiper .swiper-slide .contn .link a{
                line-height: 48px;
                width: 240px;
            }
            main .headSwiper .swiper-slide .timer{
                left: 66px;
            }
            main .headSwiper .swiper-slide .timer .page .current{
                font-size: 26px;
            }

            main .intro .txtBox .txt{
                max-width: 275px;
            }
            main .idea .txtBox .content>p{
                max-width: 200px;
            }
            main .idea{
                margin-top: 260px;
            }
            main .idea .txtBox .content h1{
                margin-bottom: 75px;
            }
            
            main .custmz .contn a{
                width: 220px;
                height: 220px;
                line-height: 220px;
            }
        }
        @media(max-width:1400px){
            main .headSwiper{
                margin-bottom: 200px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-left: 160px;
            }
            main .idea{
                margin-top: 240px;
            }

            main .custmz .contn a{
                width: 200px;
                height: 200px;
                line-height: 200px;
            }
        }
        @media(max-width:1200px){
            main .headSwiper .swiper-slide{
                padding-left: 160px;
            }
            main .headSwiper{
                margin-left: -160px;
                margin-bottom: 170px;
            }
            main .headSwiper .swiper-slide .contn .link{
                left: 55px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-right: -55px;
            }
            main .headSwiper .swiper-slide .contn .link a{
                width: 220px;
            }
            main .headSwiper .swiper-slide .contn>p{
                margin-left: 35px;
            }
            main .headSwiper .swiper-slide .timer{
                left: 57px;
                top: 35vh;
            }
            main .headSwiper .swiper-slide .timer .page .current{
                font-size: 22px;
            }
            main .headSwiper .swiper-slide .timer i{
                height: 86px;
            }
            
            
            main .intro>*{
                min-height: 500px;
            }
            main .intro .txtBox .txt{
                max-width: 250px;
            }
            main .idea .txtBox .content>p{
                max-width: 180px;
            }
            main .idea .txtBox .content h1{
                margin-bottom: 70px;
            }
            main .creative{
                margin-top: 120px;
            }
            main .idea .picBox{
                margin-left: 0px;
            }
            main .custmz .contn a{
                width: 180px;
                height: 180px;
                line-height: 180px;
                font-size: 24px;
            }
        }
        @media(max-width:1024px){
            
            main .intro .txtBox .verLine,
            main .creative .row:nth-child(1) .box.pic .horLine,
            main .idea .txtBox .horLine,
            main .flexible .verLine{
                display: none;
            }

            main .headSwiper{
                margin-left: 0px;
                margin-bottom: 140px;
                min-height: 80vh;
            }
            main,
            main .headSwiper .swiper-slide{
                padding-left: 0px;
            }
            main .headSwiper .swiper-slide{
                min-height: initial;
            }
            main .headSwiper .swiper-slide .contn>p{
                margin-left: 0px;
                padding-top: 35px;
            }
            main .headSwiper .swiper-slide .contn .title{
                margin-top: 35px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-left: 120px;
                margin-top: -4vw;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-right: -50px;
                margin-bottom: 26px;
            }
            main .headSwiper .swiper-slide .contn .link{
                top: initial;
                bottom: 0px;
                left: 130px;
            }
            main .headSwiper .swiper-slide .contn .link a{
                width: 200px;
            }
            main .headSwiper .btns{
                display: none;
            }
            main .headSwiper .swiper-slide .timer{
                top: auto;
                bottom: 0px;
            }
            

            
            main .intro .txtBox .txt{
                max-width: 230px;
            }
            main .idea .txtBox .content>p{
                max-width: 165px;
            }
            main .intro .txtBox span:first-child{
                font-size: 12px;
            }
            main .creative .row:nth-child(1) .box.pic p{
                width: auto;
            }
            main .creative .row:nth-child(1) .box.pic p img{
                max-width: 100%;
            }
            main .idea{
                margin-top: 200px;
            }
            main .idea .txtBox .content h1{
                margin-bottom: 65px;
            }

            main .flexible p{
                font-size: 12px;
            }

            main .custmz .contn a{
                width: 140px;
                height: 140px;
                line-height: 140px;
                font-size: 20px;
                top: 15%;
            }
            
        }
        @media(min-width:768px){
            main .flexible .horLine{
                display: none;
            }
        }
        @media(max-width:767px){
            main .headSwiper{
                margin-bottom: 90px;
                min-height: initial;
            }
            main .headSwiper .swiper-slide .contn{
                padding-left: 25px;
                padding-right: 25px;
            }
            main .headSwiper .swiper-slide .contn>p{
                left: 25px;
            }
            main .headSwiper .swiper-slide .contn .title h1{
                font-size: 70px;
            }
            main .headSwiper .swiper-slide .contn .link{
                left: 105px;
            }
            main .headSwiper .swiper-slide .contn .link a{
                line-height: 40px;
                width: 190px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-left: 40px;
                margin-top: -30px;
            }
            main .headSwiper .swiper-slide .contn .picBox{
                margin-right: -25px;
            }
            main .headSwiper .swiper-slide{
                min-height: initial;
            }
            main .headSwiper .swiper-slide .timer{
                left: 30px;
            }
            main .headSwiper .swiper-slide .timer .page .current{
                font-size: 20px;
            }
            main .headSwiper .swiper-slide .timer .page .current::before{
                margin-right: 10px;
            }
            main .headSwiper .swiper-slide .timer i{
                height: 48px;
                margin-top: 20px;
            }


            main .intro{
                display: block;
                padding: 0px 25px;
            }
            main .intro>*{
                width: 100%;
                padding-top: 48px;
                min-height: initial;
            }
            main .intro .txtBox{
                display: block;
            }
            main .intro .txtBox .txt,
            main .idea .txtBox .content>p{
                max-width: 100%;
            }
            main .intro .tips{
                margin-top: 95px;
            }

            main .creative .row:nth-child(1) .pic{
                width: 40%;
            }
            main .creative .row:nth-child(1) .txt,
            main .creative .row:nth-child(1) .pic{
                width: 60%;
            }
            main .creative .row:nth-child(3){
                width: 100%;
                margin-top: 50px;
            }
            main .creative .row:nth-child(1) .box.txt p{
                font-size: 14px;
            }
            main .creative .row:nth-child(3) p{
                font-size: 12px;
            }
            main .idea,
            main .idea .txtBox{
                margin-top: 50px;
                display: block;
            }
            main .idea>*{
                width: 100%;
            }
            main .idea .txtBox .content h1{
                margin-bottom: 60px;
            }
            main .custmz{
                margin-top: 240px;
            }
            main .custmz .contn a {
                width: 120px;
                height: 120px;
                line-height: 120px;
                font-size: 18px;
            }
        }